<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>添加客户</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">

		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
		<script type="text/javascript" src="layui/layui/layui.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=lR1U5nH8qoq0CySuAyl4tL3XEtKZ6fvO">
		</script>
		<script type="text/javascript" src="js/citypicker.js"></script>
		<script src="js/ServerUrl.js"></script>
		<style type="text/css">
			#selectmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin-top: 10px;
				font-family: "微软雅黑";
			}

			.anchorBL {
				display: none;
			}

			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
		</style>
		<script>
			var rowCount = 1; //(资源)行数默认1行 
			//添加资源输入框项 
			function addCenterIpGrp(obj) {
				rowCount++;
				html = '<div style="margin: 0px 0px 10px;"  class="input-group centerIp">' +
					'<div class="col-md-6">' +
					'<input class="form-control rewardId" required="required" placeholder="姓名" type="text" name="contactname' +
					rowCount +
					'" id="contactname' + rowCount +
					'" >' +
					'</div>' +
					'<div class="col-md-6">' +
					' <input class="form-control rewardNum" required="required" placeholder="电话" type="text" name="phone' +
					rowCount +
					'" id="phone' +
					rowCount + '" >' +
					'</div>' +
					' <span class="input-group-btn">' +
					'<button class="btn btn-info" type="button" data-toggle="tooltip" id="delCenterIpGrp"><span class="glyphicon glyphicon-minus">-</span></button>' +
					' </span>' +
					'</div>'
				obj.insertAdjacentHTML('beforebegin', html)
			}
			$(document).on('click', '#delCenterIpGrp', function() {
				var el = this.parentNode.parentNode;
				var centerIp = $(this).parent().parent().find('#ipInput').val();
				el.parentNode.removeChild(el);
				rowCount--;
			})

			$(function() {
				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findKind",
					success: function(result) {
						for (var i = 0; i < result.length; i++) {
							$('#companykindid').append('<option value="' + result[i].id + '">' + result[i]
								.companykind + '</option>');
						}
					},
					error: function() {
						layer.msg('findKind异常');
					}
				});

				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findBoxtype",
					success: function(result) {
						for (var i = 0; i < result.length; i++) {
							$('#boxtypeid').append('<option value="' + result[i].id + '">' + result[i]
								.boxtype + '</option>');
						}
					},
					error: function() {
						layer.msg('findBoxtype异常');
					}
				});

				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findPayperiod",
					success: function(result) {
						for (var i = 0; i < result.length; i++) {
							$('#payperiod').append('<option value="' + result[i].id + '">' + result[i]
								.payperiod + '</option>');
						}
					},
					error: function() {
						layer.msg('findPayperiod异常');
					}
				});

				$.ajax({
					//几个参数需要注意一下
					type: "get", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/findRisk",
					success: function(result) {
						for (var i = 0; i < result.length; i++) {
							$('#riskinformation').append('<option value="' + result[i].id + '">' + result[i]
								.riskinfo + '</option>');
						}
					},
					error: function() {
						layer.msg('findRisk异常');
					}
				});
			})

			function btnSubmit() {
				var contactinfo = "";

				for (var i = 2; i <= rowCount; i++) {
					var contactname = document.getElementById("contactname" + i).value;
					var phone = document.getElementById("phone" + i).value;
					if (contactname != "" && phone != "")
						contactinfo += contactname + "@@@@" + phone + "@@@@@";
					else {
						return;
					}
				}
				var clientgrade = document.getElementById("clientgrade").value;
				var clientno = document.getElementById("clientno").value;
				var date = document.getElementById("date").value;
				var companyboss = document.getElementById("companyboss").value;
				var companyname = document.getElementById("companyname").value;
				var companykindid = $('#companykindid').val();
				var businessrange = document.getElementById("businessrange").value;
				var position = document.getElementById("position").value;
				var companyscale = document.getElementById("companyscale").value;
				var purchase = document.getElementById("purchase").value;
				var boxtypeid = document.getElementById("boxtypeid").value;
				var shippingaddress = document.getElementById("shippingaddress").value;
				var distance = document.getElementById("distance").value;
				var payperiod = document.getElementById("payperiod").value;
				var payway = document.getElementById("payway").value;
				var companylevel = document.getElementById("companylevel").value;
				var riskinformation = document.getElementById("riskinformation").value;
				var needsize = document.getElementById("needsize").value;
				if (!(clientgrade != "" &&
						clientno != "" &&
						date != "" &&
						companyboss != "" &&
						companyname != "" &&
						companykindid != "" &&
						businessrange != "" &&
						position != "" &&
						companyscale != "" &&
						purchase != "" &&
						boxtypeid != "" &&
						shippingaddress != "" &&
						distance != "" &&
						payperiod != "" &&
						payway != "" &&
						companylevel != "" &&
						riskinformation != "" &&
						needsize != ""
					)) {
					return;
				}
				$.ajax({
					//几个参数需要注意一下
					type: "POST", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/addClientDemand", //url
					data: {
						"clientgrade": clientgrade,
						"clientno": clientno,
						"date": date,
						"companyboss": companyboss,
						"companyname": companyname,
						"companykindid": companykindid,
						"businessrange": businessrange,
						"contactinfo": contactinfo,
						"position": position,
						"companyscale": companyscale,
						"purchase": purchase,
						"boxtypeid": boxtypeid,
						"shippingaddress": shippingaddress,
						"distance": distance,
						"payperiod": payperiod,
						"payway": payway,
						"companylevel": companylevel,
						"riskinformation": riskinformation,
						"needsize": needsize
					},
					success: function(result) {
						console.log(result);
						if (result.status == 404) {
							// alert("请检查客户编号是否重复");
							layer.msg('录入失败，请检查客户编号是否重复');
						} else if (result.status == 200) {
							// layer.alert('录入成功');
							layer.msg('录入成功');
						}
					},
					error: function() {
						layer.msg('表单提交异常');
					}
				});
			}
		</script>
	</head>

	<body>
		<!--页面主要内容-->
		<div class="container-fluid">
			<div class="row">
				<div class="layout-sidebar-scroll">
				</div>
				<form class="form-horizontal" onsubmit="return false" action="#" method="post"
					enctype="multipart/form-data">
					<div class="col-md-6">

						<div class="card">
							<div class="card-header">
								<h4>客户基本信息</h4>
							</div>
							<div class="card-body">

								<div class="form-group">
									<div class="col-xs-6">
										<input required="required" class="form-control" type="text" id="clientgrade"
											name="clientgrade" placeholder="客户等级">
									</div>
									<div class="col-xs-6">
										<input required="required" class="form-control" type="text" id="clientno"
											name="clientno" placeholder="客户编号">
									</div>
								</div>
								<div class="form-group">

									<div class="col-xs-6">
										<input required="required" class="form-control js-datepicker m-b-10" type="text"
											id="date" name="date" placeholder="日期选择" value=""
											data-date-format="yyyy-mm-dd" />
									</div>
									<div class="col-xs-6">
										<input required="required" class="form-control" type="text" id="companyboss"
											name="companyboss" placeholder="归属人">
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="companyname"
											name="companyname" placeholder="公司名称">
									</div>
								</div>
								<div class="form-group has-info">
									<div class="col-xs-12">
										<select required="required" class="form-control" id="companykindid"
											name="companykindid" size="1">
											<option selected hidden disabled value="">点击选择公司类型</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<textarea required="required" class="form-control" id="businessrange"
											name="businessrange" rows="4" placeholder="经营范围"></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="position"
											name="position" placeholder="职位">
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="companyscale"
											name="companyscale" placeholder="公司规模">
									</div>
								</div>
								<div class="input-group" id="centerIpGroup">
									<label class="input-group-addon">联系人</label>
									<div class="col-xs-12">
										<button class="btn btn-info" type="button" data-toggle="tooltip"
											id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)"><span
												class="glyphicon glyphicon-plus">+</span></button>
									</div>
									<script>
										document.getElementById("addCenterIpGrpBtn").click();
									</script>
								</div>

							</div>
						</div>
					</div>

					<div class="col-md-6">
						<div class="card">
							<div class="card-header">
								<h4>客户采购需求</h4>
							</div>
							<div class="card-body">


								<div class="form-group has-info">
									<div class="col-xs-12">
										<select class="form-control" id="boxtypeid" name="boxtypeid" size="1">

											<option selected hidden disabled value="">请选择定制类型</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="purchase"
											name="purchase" placeholder="月采购额（万元）">
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-8">
										<input required="required" class="form-control" type="text" id="shippingaddress"
											name="shippingaddress" placeholder="送货地址">
									</div>
									<div class="col-xs-4">
										<button class="btn btn-info" type="button" data-toggle="modal"
											data-target="#exampleModal">去选择</button>
									</div>
								</div>
								<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close"><span aria-hidden="true">&times;</span></button>
												<h3 class="modal-title" id="exampleModalLabel">自动选择地址</h3>
											</div>
											<div class="modal-body">
												<div class="form-group">
													<div class="col-md-12">
														<div data-toggle="distpicker" data-autoselect="3">
															<div class="col-md-4">
																<select class="form-control" id="province"></select>
															</div>
															<div class="col-md-4">
																<select class="form-control" id="city"></select>
															</div>
															<div class="col-md-4">
																<select class="form-control" id="district"></select>
															</div>
														</div>
													</div>
												</div>
												<div class="form-group">
													<div class="col-xs-12">
														<div class="col-xs-12">
															<input type="text" class="form-control" id="detailaddress"
																name="detailaddress" placeholder="详细地址" />
														</div>
													</div>
												</div>
												<div class="form-group">
													<div class="col-xs-12">
														<div class="col-xs-12">
															<div style="height: 300px;">
																<div id="selectmap"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-info" data-dismiss="modal"
													onclick="confirmAddress()">确认</button>
												<button type="button" class="btn btn-normal"
													data-dismiss="modal">关闭</button>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="distance"
											name="distance" placeholder="距离">
									</div>
								</div>
								<div class="form-group has-info">
									<div class="col-xs-12">
										<select class="form-control" id="payperiod" name="payperiod" size="1">

											<option selected hidden disabled value="">请选择付款账期</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="payway"
											name="payway" placeholder="付款方式">
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="companylevel"
											name="companylevel" placeholder="企业级别">
									</div>
								</div>
								<div class="form-group has-info">
									<div class="col-xs-12">
										<select class="form-control" id="riskinformation" name="riskinformation"
											size="1">
											<option selected hidden disabled value="">请选择风险信息</option>

										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<input required="required" class="form-control" type="text" id="needsize"
											name="needsize" placeholder="需求尺寸">
									</div>
								</div>
								<div class="example-box">
									<button class="btn btn-label btn-primary" onclick="btnSubmit()"><label><i
												class="mdi mdi-checkbox-marked-circle-outline"></i></label>
										确认录入</button>
									<button class="btn btn-label btn-warning" type="reset"><label><i
												class="mdi mdi-delete-empty"></i></label> 清空所填</button>

								</div>

							</div>
						</div>
					</div>
				</form>
			</div>

		</div>
		<!--End 页面主要内容-->

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
		<link href="css/style.css" rel="stylesheet">
		<!--日期选择插件-->
		<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
		<script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("selectmap"); // 创建Map实例
			map.centerAndZoom(new BMap.Point(120.394182, 31.615758), 8); // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			map.setMapType(BMAP_NORMAL_MAP); //改动地图类型为3D地图BMAP_HYBRID_MAP
			var point = new BMap.Point(120.394182, 31.615758);
			var marker = new BMap.Marker(point); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			map.centerAndZoom(point, 8);
			var opts = {
				width: 150, // 信息窗口宽度
				height: 70, // 信息窗口高度
				title: "箱博士" // 信息窗口标题
			}
			var infoWindow = new BMap.InfoWindow("地址：无锡市锡山区春晖路", opts); // 创建信息窗口对象
			map.openInfoWindow(infoWindow, point); //初始开启信息窗口
			var geocoder = new BMap.Geocoder();
			map.addEventListener("click", function(e) { //给地图添加点击事件
				geocoder.getLocation(e.point, function(rs) {
					console.log($("#province"));
					var province = rs.addressComponents.province;
					var city = rs.addressComponents.city;
					var district = rs.addressComponents.district;
					if (province != $('#province option:selected').val()) {
						$("#province").find("option[value='" + province + "']").attr("selected", false);
						$("#province").find("option[value='" + province + "']").attr("selected", true);
						document.getElementById("province").dispatchEvent(new Event('change'));
					}
					if (city != $('#city option:selected').val()) {
						$("#city").find("option[value='" + city + "']").attr("selected", false);
						$("#city").find("option[value='" + city + "']").attr("selected", true);
						document.getElementById("city").dispatchEvent(new Event('change'));
					}
					if (district != $('#district option:selected').val()) {
						$("#district").find("option[value='" + district + "']").attr("selected", false);
						$("#district").find("option[value='" + district + "']").attr("selected", true);
						document.getElementById("district").dispatchEvent(new Event('change'));
					}
					console.log(rs.addressComponents.province);
					console.log(rs.addressComponents.city);
					console.log(rs.addressComponents.district);
					console.log(rs.addressComponents.street);
					console.log(rs.addressComponents.streetNumber);
					document.getElementById("detailaddress").value = rs.addressComponents.street + rs
						.addressComponents.streetNumber;
				});
			});

			function confirmAddress() {
				var address = $('#province option:selected').val() + $('#city option:selected').val() + $(
					'#district option:selected').val() + document.getElementById("detailaddress").value;
				$('#shippingaddress').attr("value", address);
			}
		</script>
	</body>
</html>
